<template>
    <div id="Test">
      <div class="showChecked" v-show="checkedChild.length">
        展示选中项
          <div v-for="Item in dataSource" :data-id="Item.id" :data-tit="Item.title" :key="Item.id" >
            <div v-for="child in Item.children" data-id="child.id" :key="child.id"  v-show="checkedChild.indexOf(child.id)>-1" @click=" SecendTitClick(child.id)" class="SecendTit">
              <div class="tit">{{child.title}}</div>
            </div>
          </div>
      </div>
      <div v-for="Item in dataSource" :data-id="Item.id" :data-tit="Item.title" :key="Item.id" :class="['FirstTit',{active:currentItem.id==Item.id}]" @click="FirstTitClick(Item.id)"  >
          <div class="tit" >{{Item.title}}</div>
      </div>
      <br>
      <div v-for="child in currentItem.children" data-id="child.id" :key="child.id"  :class="['SecendTit',{active: checkedChild.indexOf(child.id)>-1 }]" @click=" SecendTitClick(child.id)">
            <div class="tit">{{child.title}}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 数据源
      dataSource: [
        {
          id: "0",
          title: "商务",
          children: [
            {
              id: "0-0",
              title: "单源"
            },
            {
              id: "0-1",
              title: "渠道"
            },
            {
              id: "0-2",
              title: "培训"
            }
          ]
        },
        {
          id: "1",
          title: "主案",
          children: [
            {
              id: "1-0",
              title: "培训"
            },
            {
              id: "1-1",
              title: "系统"
            }
          ]
        },
        {
          id: "2",
          title: "工程",
          children: [
            {
              id: "2-0",
              title: "质量"
            },
            {
              id: "2-1",
              title: "材料"
            },
            {
              id: "2-2",
              title: "施工团队"
            },
            {
              id: "2-3",
              title: "平台"
            }
          ]
        },
        {
          id: "3",
          title: "管理",
          children: [
            {
              id: "3-0",
              title: "日常管理"
            },
            {
              id: "3-1",
              title: "系统管理"
            },
            {
              id: "3-2",
              title: "管理经验"
            }
          ]
        },
        {
          id: "4",
          title: "关系",
          children: [
            {
              id: "4-0",
              title: "财务"
            },
            {
              id: "4-1",
              title: "业务"
            }
          ]
        },
        {
          id: "5",
          title: "资金",
          children: [
            {
              id: "5-0",
              title: "利润"
            },
            {
              id: "5-1",
              title: "提点"
            },
            {
              id: "5-2",
              title: "加盟费"
            },
            {
              id: "5-3",
              title: "投资金额"
            }
          ]
        },
        {
          id: "6",
          title: "人员",
          children: [
            {
              id: "6-0",
              title: "人数"
            },
            {
              id: "6-1",
              title: "成本"
            },
            {
              id: "6-2",
              title: "团队组建"
            }
          ]
        },
      ],
      // 当前选中的父级
      currentItem: { id: "" },
      // 选中的子集id的集合
      checkedChild: []
    };
  },
  mounted() {
  },
  methods: {
    // 一级标题的点击事件
    FirstTitClick(id) {
      this.currentItem = (this.currentItem.id !== id &&
      this.dataSource[id]) || { id: "" };
    },
     // 二级标题的点击事件 传入当前点击的子标题id
    SecendTitClick(childID) {
      // 判断当前  选中的子集id的集合  中 有没有当前点击的项
      if (this.checkedChild.indexOf(childID) > -1) {
        // 如果有  删掉当前id
        var index = this.checkedChild.indexOf(childID);
        this.checkedChild.splice(index, 1);
      } else {
        // 如果没有 push当前id  到  选中的子集id的集合
        this.checkedChild.push(childID);
      }
    }
  }
};
</script>
<style >
#Test {
  width: 100%;
  height: 100%;
  padding: 0.54rem;
  box-sizing: border-box;
  font-size: 0.26rem;
  background-color: #fff;
}
.showChecked {
  background-color: rgb(222, 226, 204);
  height: 3rem;
}
.FirstTit {
  font-size: 0.26rem;
  display: inline-block;
}
.SecendTit {
  font-size: 0.2rem;
  display: inline-block;
}
.tit {
  background-color: #ccc;
  height: 0.3rem;
  width: auto;
  display: inline-block;
  padding: 0.1rem;
  margin: 0.1rem;
}
.active {
  color: rgb(209, 34, 34);
}
.active .tit {
  background-color: rgb(30, 106, 221);
}
</style>
